<template>
    <div>
        <h3>添加</h3>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>门店名称</td>
                    <td><input type="text" v-model="queryinfo.ShopName"/></td>
                </tr>
                <tr>
                    <td>分店名称</td>
                    <td><input type="text" v-model="queryinfo.BranchName"/></td>
                </tr>
                <tr>
                    <td>门店图片</td>
                    <td>
                        <input type="file" @change="pho"/>
                        <img :src="queryinfo.Photo" alt="" width="100" height="100" v-if="queryinfo.Photo!=''"/></td>
                </tr>
                <tr>
                    <td>门店创建时间</td>
                    <td><input type="date" v-model="queryinfo.BeginTime"/></td>
                </tr>
                <tr>
                    <td>门店状态</td>
                    <td>
                        <input type="radio" v-model="queryinfo.State" name="State" :value="0"/>启用
                        <input type="radio" v-model="queryinfo.State" name="State" :value="1"/>禁用
                    </td>
                </tr>
                <tr>
                    <td>门店特色</td>
                    <td>
                        <input type="checkbox" v-model="queryinfo.Feature" value="满月宴"/>满月宴
                        <input type="checkbox" v-model="queryinfo.Feature" value="升学宴"/>升学宴
                        <input type="checkbox" v-model="queryinfo.Feature" value="聚会宴"/>聚会宴
                        <input type="checkbox" v-model="queryinfo.Feature" value="生日宴"/>生日宴
                    </td>
                </tr>
                <tr>
                    <td>门店介绍</td>
                    <td>
                        <textarea v-model="queryinfo.Desc"></textarea></td>
                </tr>
                <tr>
                    <td>门店位置</td>
                    <td>
                        <select v-model="queryinfo.AddressId">
                            <option value="">请选择</option>
                            <option :value="item.Id" v-for="item in data.list">{{ item.Name }}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>酒店类型</td>
                    <td>
                        <select v-model="queryinfo.ShopType">
                            <option value="">请选择</option>
                            <option :value="1">普通酒店</option>
                            <option :value="2">三星酒店</option>
                            <option :value="3">五星酒店</option>
                            <option :value="4">电竞酒店</option>
                            <option :value="5">商务酒店</option>
                            <option :value="6">民宿酒店</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="button" value="添加" @click="add" class="btn btn-success"/></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive, onMounted}from 'vue';
import axios from 'axios';
import moment from 'moment';
import {useRouter,useRoute}from 'vue-router'
const router=useRouter();
const route=useRoute();

let data:any=reactive({
    list:[],
})

let queryinfo:any=reactive({
  "ShopName": "",
  "BranchName": "",
  "Photo": "",
  "BeginTime": "",
  "State": 0,
  "Feature": [],
  "Desc": "",
  "AddressId": "",
  "ShopType": "",
})

onMounted(()=>{
    bang();
})

const pho=(e:any)=>{
    let obj=e.target.files[0];
    let f=new FormData();
    f.append('file',obj);
    axios({
        url:'/api/ImgPhoto/Imgfpr',
        method:'post',
        data:f
    })
    .then(res=>{
        console.log(res);
        queryinfo.Photo=res.data;
    })
    .catch(err=>{
        console.log(err);
    })
}

const bang=()=>{
    axios({
        url:'/api/Shop/Getlist',
        method:'get'
    })
    .then(res=>{
        console.log(res);
        data.list=res.data;
    })
    .catch(err=>{
        console.log(err);
    })
}

const add=()=>{
    queryinfo.Feature=queryinfo.Feature.toString();
    axios({
        url:'/api/Shop/AddShop',
        method:'post',
        data:queryinfo,
    })
    .then(res=>{
        console.log(res);
        if(res.data==-1){
            alert('门店名称不能重复');
        }
        if(res.data>0){
            alert('添加成功');
            router.push('/list');
        }
        else{
            alert('添加失败');
        }
    })
    .catch(err=>{
        console.log(err);
    })
}
</script>

<style scoped>

</style>